<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <ul :class="isShow ? 'ul2' : 'ul1'">
        <li
          v-for="item in list"
          :key="item.proid"
          @click="godetail(item.proid)"
        >
          <img :src="item.img1" />
          <div>
            <h4 class="van-multi-ellipsis--l2">{{ item.proname }}</h4>
            <p class="colorred">￥{{ item.originprice }}</p>
          </div>
        </li>
      </ul>
      <div class="small" @click="isShow = !isShow">
        <van-icon name="bars" v-if="isShow" />
        <van-icon name="apps-o" v-else />
      </div>
      <div class="top" @click="gotop">
        <van-icon name="back-top" />
      </div>
    </van-list>
  </div>
</template>

<script>
import { getProList } from "@/api/home";
export default {
  data() {
    return {
      list: [],
      isShow: false,
      loading: false,
      finished: false,
      count: 1,
      timer: null,
    };
  },
  methods: {
    onLoad() {
      this.loading = true;
      setTimeout(() => {
        getProList({ count: this.count + 1, limitNum: 12 }).then((data) => {
          console.log(data.data.data);
          this.loading = false;
          if (data.data.data.length == 0) {
            this.finished = true;
          } else {
            this.list = [...this.list, ...data.data.data];
            this.count++;
          }
        });
      }, 1500);
    },
    godetail(proid) {
      this.$router.push("/Detail/" + proid);
    },
    gotop(){
      window.location.reload()
    }
  },
  created() {
    getProList({ count: this.count, limitNum: 12 }).then((data) => {
      console.log(data.data.data);
      this.list = data.data.data;
    });
  },
};
</script>

<style scoped>
.ul1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.ul1 li {
  width: 49%;
  background-color: white;
  border-radius: 0.625rem;
}
.ul1 li img {
  width: 100%;
}
.ul2 li {
  display: flex;
  background-color: white;
  border-radius: 0.625rem;
  flex: 1;
}
.ul2 li img {
  width: 30%;
  height: 7.5rem;
  padding: 0.25rem;
}
.ul2 li div {
  flex: 1;
}
.colorred {
  color: red;
}
.small {
  z-index: 999;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  border: 1px solid gray;
  line-height: 1.875rem;
  text-align: center;
  position: fixed;
  right: 1.25rem;
  bottom: 3.75rem;
  background-color: #f4f4f495;
}
.top {
  z-index: 999;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  border: 1px solid gray;
  line-height: 1.875rem;
  text-align: center;
  position: fixed;
  right: 1.25rem;
  bottom: 6.125rem;
  background-color: #f4f4f495;
}
</style>